<template>
	<view>
		<view :style="{ height: modelHeight + 'px' }"><slot></slot></view>
		<view class="tabs">
			<navigator url="/pages/admin/sign_in/sign_in" :class="[url == '/pages/coach/sign_in/sign_in' ? 'active' : '']" open-type="redirect" class="item" hover-class="none">
				<image class="default" src="@/static/tabBar/sign_in.png" mode="widthFix" />
				<image class="yes" src="@/static/tabBar/sign_in_active.png" mode="widthFix" />
				<view class="text">签到</view>
			</navigator>
			<navigator url="/pages/admin/student/student" :class="[url == '/pages/coach/student/student' ? 'active' : '']" open-type="redirect" class="item" hover-class="none">
				<image class="default" src="@/static/tabBar/student.png" mode="widthFix" />
				<image class="yes" src="@/static/tabBar/student_active.png" mode="widthFix" />
				<view class="text">学员管理</view>
			</navigator>
			<navigator class="item" open-type="redirect" hover-class="none">
				<image class="default" src="@/static/tabBar/warehouse.png" mode="widthFix" />
				<view class="text">仓库管理</view>
			</navigator>
		</view>
	</view>
</template>

<script>
export default {
	props: ['url'],
	data() {
		return {
			modelHeight: 1
		};
	},
	mounted() {
		this.$sys.getSystemInfo({ h5: true }).then(data => {
			this.$sys.getBoundingClientRect('.tabs').then(e => {
				this.modelHeight = data.screenHeight - e.height;
				this.$emit('setHeight', this.modelHeight);
			});
		});
	},
	methods: {}
};
</script>

<style lang="scss">
.tabs {
	position: fixed;
	width: 100%;
	height: 100rpx;
	z-index: 3;
	left: 0rpx;
	bottom: 0px;
	background-color: $bg-color-white;
	@extend .flex-space-between-center;
	padding: 8rpx 0px;
	border-top: 1rpx solid #e8e8e8;
	.item {
		width: 30%;
		text-align: center;
		image {
			width: 45rpx;
			margin: auto;
		}
		.text {
			margin-top: 8rpx;
			color: $text-color-nine;
			font-size: $font-size-sm;
		}
		.yes {
			display: none;
		}
	}
	.active {
		.yes {
			display: block;
		}
		.default {
			display: none;
		}
		.text {
			color: $text-color-three;
		}
	}
}
</style>
